<template>
  <div>
    <div class="abstatic-height"></div>
    <div class="app-container calendar-fire-container">
      <div class="topText">
        <!-- <span style="color:#FF9500;font-size:24px;">服务概况</span> -->
        <div class="abstatic-height_title">
          服务概况
        </div>
        &nbsp;
        <span style="color:#D1D1D6;font-size:14px;"
          >本月各分析方案累积提供的服务次数</span
        >
      </div>
        <border-warp width-auto>
          <el-main>
            <el-row :gutter="9">
              <el-col :span="4">
                <div class="left">
                  <div class="item-title">{{ listInfo.name }}</div>
                  <div class="item-datean">{{ listInfo.time }}更新</div>
                  <div class="item-num">
                    <span class="num">{{ listInfo.count }}</span>
                    <span>次</span>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-main>
        </border-warp>
        <div class="topText" style="margin-top: 20px;">
          <!-- <span style="color:#FF9500;font-size:24px;">分析方案</span> -->
          <div class="abstatic-height_title">
            分析方案
          </div>
          &nbsp;
          <span style="color:#D1D1D6;font-size:14px;"
            >同一台设备仅可使用同一种分析方案</span
          >
        </div>
        <el-container class="fire-identify">
          <border-warp width-auto>
            <el-main>
              <el-row>
                <el-col
                  :span="8"
                  v-for="(item, index) in analizeGroup"
                  :key="index"
                  v-show="index == 0"
                >
                  <div class="fa-content">
                    <div class="fire_left" style="flex:3">
                      <img
                        :src="item.solutionImage"
                        class="bg-fire"
                        style="float:left;margin:0 5px;"
                      />
                    </div>
                    <div class="mid-text">
                      <span style="font-size:18px;line-height:40px;">{{
                        item.solutionName
                      }}</span>
                      <br />
                      <span
                        style="font-size:18px;line-height:30px;"
                        v-if="
                          item.solutionCount != '' && item.solutionCount != null
                        "
                        >{{ item.solutionCount }}</span
                      >
                      <span
                        v-if="
                          item.solutionCount != '' && item.solutionCount != null
                        "
                        style="font-size:12px;"
                        >台视频设备</span
                      >
                      <br />
                      <span
                        style="font-size:18px;line-height:30px;"
                        v-if="
                          item.solutionCount == '' || item.solutionCount == null
                        "
                        >0</span
                      >
                      <span
                        style="font-size:12px;"
                        v-if="
                          item.solutionCount == '' || item.solutionCount == null
                        "
                        >台视频设备</span
                      >
                      <br />
                      <!-- <span style="font-size:12px;color:#8E8E93;">计费方式：</span> <span :title="hysb.mWays">{{hysb.mWays}}</span><br> -->
                      <!-- <span style="font-size:12px;color:#8E8E93;">服务费用：</span><span>{{hysb.fwfy}}</span> -->
                    </div>
                    <div class="btn-deploy">
                      <el-button
                        size="mini"
                        type="primary"
                        @click="deploy(index)"
                        >配置</el-button
                      >
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-main>
          </border-warp>
        </el-container>
    </div>
  </div>
</template>
<script>
import img_fire from "@/assets/device-images/img_fire.png";
import { getSumtimes, getAnaplan } from "@/api/device/videoAnalyze/index";
export default {
  data() {
    return {
      img_fire: img_fire,
      ids: "",
      listInfo: {
        title: "",
        time: "",
        num: 0
      },
      analizeGroup: []
    };
  },
  mounted() {
    this.getSum();
    this.getAnaplan();
  },
  created() {},
  computed: {},
  methods: {
    deploy(index) {
      this.$router.push({
        path: "/videoSurveillance/identifyDevice",
        query: { plan: this.analizeGroup[index].id }
      });
    },
    getSum() {
      getSumtimes().then(res => {
        //
        if (res.data.length > 0) {
          this.listInfo = res.data[0];
        }
      });
    },
    getAnaplan() {
      getAnaplan().then(res => {
        if (res.data.length > 0) {
          this.analizeGroup = res.data;
        }
      });
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.calendar-fire-container {
  width: 100%;
}
.topText {
  width: 100%;
  margin-bottom: 20px;
}
.left {
  flex-direction: column;
  display: flex;
  align-items: flex-start;
  .item-title {
    font-size: 18px;
    color: #fff;
  }
  .item-datean {
    color: #c7c7cc;
    font-size: 12px;
    line-height: 30px;
  }
  .item-num {
    color: rgba(255, 255, 255, 0.7);
    .num {
      font-size: 60px;
    }
  }
}
.fa-content {
  display: flex;
  align-items: center;
  border: 1px solid rgba(80, 277, 194, 0.3);
  border-radius: 3px;
  .bg-fire {
    width: 75px;
    height: 94px;
  }
  .mid-text {
    color: #fff;
    flex: 4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .btn-deploy {
    flex: 3;
    text-align: center;
  }
}

.abstatic-height_title {
  width: 90px;
  height: 30px;
  background: none;
  background: url("../../../assets/layout/CombinedShape2.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: inline-flex;
  color: #07eeb8;
  justify-content: center;
  align-items: center;
}
</style>
